import { HashRouter, Route, Routes, NavLink } from 'react-router-dom';
/**
 * HashRouter 和 BrowserRouter 包裹整个应用，后者修改的是hash值
 * Switch(5.x) Routes(6.x) 包裹 Route，必须是最外层的Route包裹 -- 模板代码??
 * Route
 *   指定渲染的组件： 5.x用 component 传入的是组件函数；6.x用 element，且必须传入组件实例！
 *   渲染子路由： <Outlet> 此处没有用这种方式
 * Link NavLink Navigate 三种路由链接
 */

import TestUI from './TestUI';
import TestRedux from './TestRedux';
import TestChore from './TestChore';
import TestDrag from './TestDrag';
// import TestPCE from './TestPCE';
import TestDrawerAndModal from './TestDrawerAndModal';
import React from 'react';
const TestPCE = React.lazy(() => import(/**  */ './TestPCE'));
export default function MyRouter() {
  return (
    <HashRouter>
      <App>
        <Routes>
          {/* index 指明的默认路由，必须不含有子路由 */}
          <Route index path="/select" element={<TestUI />}></Route>
          <Route path="/redux" element={<TestRedux />}></Route>
          <Route path="/chore" element={<TestChore />}></Route>
          <Route path="/drag" element={<TestDrag />}></Route>
          <Route path="/pce" element={<TestPCE />}></Route>
          <Route path="/drawer-modal" element={<TestDrawerAndModal />}></Route>
        </Routes>
      </App>
    </HashRouter>
  );
}

function App({ children }) {
  return (
    <div className="page">
      <div className="page-nav">
        <NavLink to="/select">各种UI测试</NavLink>
        <NavLink to="/redux">测试redux</NavLink>
        <NavLink to="/chore">基础测试</NavLink>
        <NavLink to="/drag">拖拽调查</NavLink>
        <NavLink to="/pce">父子组件影响</NavLink>
        <NavLink to="/drawer-modal">抽屉-弹框嵌套</NavLink>
      </div>
      <div>{children}</div>
    </div>
  );
}
